<script setup>
import tab from "@/plugins/tab";
import { ref, reactive } from "vue";
const formRole = ref < any > (null);

const dataTree = reactive([
    {
        text: "一年级",
        value: 1,
    },
    {
        text: "二年级",
        value: "2",
    },
    {
        text: "三年级",
        value: "3",
    }])

let dataTree1 = reactive([
    {
        text: "一年级",
        value: 1,
    },
    {
        text: "二年级",
        value: "2",
    },
    {
        text: "三年级",
        value: "3",
    }])

function countyonchange(e) {
    // console.log(e);
    // console.log(e.detail.value[0].text)
    // torf.value = false;
    if (e.detail.value[0].text) {
        uni.showLoading({
            title: '正在查询',
            mask: true
        })
        Select.village = "";
        dataTree1 =([]);

        //动画取消
        setTimeout(() => {
            uni.hideLoading()
        }, 1500)
    }
}
function countyonnodeclick(e) {
    // console.log(e);
}

function villageonchange(e) {
    console.log(e);
}
function villageonnodeclick(e) {
    // console.log(e);
}

const Select = reactive({
    county: "",
    village: "",
    stationName: "",
    phase: "",
    beginDate: "",
    endDate: "",
});

const search = async () => {
    try {
        const { valid, errors } = await formRole.value.validate();
        if (valid) {
        } else {
            // 验证成功
            tab.navigateTo(`/pages_operation_management/pages/constructionInfo/index?county=${Select.county}&village=${Select.village}&stationName=${Select.stationName}&phase=${Select.phase}&beginDate=${Select.beginDate}&endDate=${Select.endDate}`);
        }
    } catch (error) {
    }
};
</script>

<template>
    <view>
        <view>
            <u-navbar @rightClick="rightClick()" :autoBack="true" :safeAreaInsetTop="false" :border="true"
                leftIconColor="#017BF6" bgColor="#F7F7F7" height="80rpx">
                <template #center style="font-weight: bolder;">
                    建设管理-选择电站
                </template>
            </u-navbar>
        </view>
        <view class="Forms">
            <uni-forms ref="formRole" :model="Select">
                <uni-forms-item label="所属区县:" required name="county" label-width="200rpx"
                    :rules="[{ required: true, errorMessage: '请选择所属区县' }]">
                    <uni-data-picker placeholder="请选择区县" :localdata="dataTree" v-model="Select.county"
                        @change="countyonchange" @nodeclick="countyonnodeclick" :clear-icon="false">
                    </uni-data-picker>
                </uni-forms-item>
                <uni-forms-item label="所属乡镇:" required name="village" label-width="200rpx"
                    :rules="[{ required: true, errorMessage: '请选择所属乡镇' }]">
                    <uni-data-picker placeholder="请选择乡镇" :localdata="dataTree1" v-model="Select.village"
                        @change="villageonchange" @nodeclick="villageonnodeclick" :clear-icon="false">
                    </uni-data-picker>
                </uni-forms-item>
                <uni-forms-item label="电站名称:" label-width="200rpx">
                    <uni-easyinput v-model="Select.stationName" placeholder="请输入电站名称" />
                </uni-forms-item>
                <uni-forms-item label="建设阶段:" name="phase" label-width="200rpx">
                    <uni-data-picker :localdata="dataTree2" v-model="Select.phase" @change="villageonchange"
                        @nodeclick="villageonnodeclick" :clear-icon="false">
                    </uni-data-picker>
                </uni-forms-item>
                <uni-forms-item label="开始日期:" name="beginDate" label-width="200rpx">
                    <uni-datetime-picker type="datetime" return-type="timestamp" v-model="Select.beginDate" />
                </uni-forms-item>
                <uni-forms-item label="结束日期:" name="endDate" label-width="200rpx">
                    <uni-datetime-picker type="datetime" return-type="timestamp" v-model="Select.endDate" />
                </uni-forms-item>
                <view style="width: 100rpx;margin-left: 40%;">
                    <up-button @click="search" type="primary" size="small" text="查询"></up-button>
                </view>
            </uni-forms>
        </view>
    </view>
</template>

<style lang="scss">
body {
    background-color: #F0EFF4;
}

.Forms {
    margin-top: 100rpx;
    padding-left: 50rpx;
    margin-right: 100rpx;
}
</style>
